<template>
	<el-form>
		<el-input placeholder="手机号" prefix-icon="el-icon-phone-outline" v-model="mobile" clearable
			@blur="check_mobile">
		</el-input>
		<el-input placeholder="验证码" prefix-icon="el-icon-chat-line-round" v-model="sms" clearable>
			<template slot="append">
				<span class="sms" @click="send_sms">{{ sms_interval }}</span>
			</template>
		</el-input>
		<el-button type="primary">登录</el-button>
	</el-form>
</template>

<script>
	export default {
		name: "smsLogin",
		data() {
			return {
				mobile: '',
				sms: '',
				sms_interval: '获取验证码',
				is_send: false,
			}
		},
		methods:{
			check_mobile() {
				if (!this.mobile) return;
				if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {
					this.$message({
						message: '手机号有误',
						type: 'warning',
						duration: 1000,
						onClose: () => {
							this.mobile = '';
						}
					});
					return false;
				}
				this.is_send = true;
			},
			send_sms() {
			
				if (!this.is_send) return;
				this.is_send = false;
				let sms_interval_time = 60;
				this.sms_interval = "发送中...";
				let timer = setInterval(() => {
					if (sms_interval_time <= 1) {
						clearInterval(timer);
						this.sms_interval = "获取验证码";
						this.is_send = true; // 重新回复点击发送功能的条件
					} else {
						sms_interval_time -= 1;
						this.sms_interval = `${sms_interval_time}秒后再发`;
					}
				}, 1000);
			}
		},
		created() {
			this.$message.error('短信登录不可使用，等待开发');
		}
	}
</script>

<style>

.sms {
  color: orange;
  cursor: pointer;
  display: inline-block;
  width: 70px;
  text-align: center;
  user-select: none;
}

</style>
